/*
 * @Author: jiu yin
 * @Date: 2023-12-13 14:19:57
 * @LastEditTime: 2024-02-05 16:19:13
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \association-service-web-admin\src\comment\upload\index.tsx
 * jiu
 */
import React, { useState } from "react";
import { PlusOutlined } from "@ant-design/icons";
import { Modal, Upload, message } from "antd";
import type { RcFile, UploadProps } from "antd/es/upload";
import type { UploadFile } from "antd/es/upload/interface";
import { getSuffix } from "@/utils";
import "./index.scss";

const getBase64 = (file: RcFile): Promise<string> =>
   new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = error => reject(error);
   });

function Upload_card(props: any) {
   const uploadButton_default = (
      <div>
         <PlusOutlined />
         <div style={{ marginTop: 8 }}>Upload</div>
      </div>
   );

   let {
      action_url,
      listType,
      count = 1,
      uploadButton = uploadButton_default,
      className,
      onRemove,
      beforeUpload_fn,
      fileSize = null, //单位M
      disabled,
      data,
      accept = "",
      fileList_props = []
   } = props;

   const [previewOpen, setPreviewOpen] = useState(false);
   const [previewImage, setPreviewImage] = useState("");
   const [previewTitle, setPreviewTitle] = useState("");
   const [fileList, setFileList] = useState<UploadFile[]>(fileList_props);
   const handleCancel = () => setPreviewOpen(false);
   const handlePreview = async (file: UploadFile) => {
      if (!file.url && !file.preview) {
         file.preview = await getBase64(file.originFileObj as RcFile);
      }
      setPreviewImage(file.url || (file.preview as string));
      setPreviewOpen(true);
      setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf("/") + 1));
   };

   //上传变化
   const handleChange: UploadProps["onChange"] = e => {
      if (e.file.response?.code == 200) {
         console.log(e, "上传成功");
         props.onChange(e);
      }
      setFileList(e.fileList);
   };

   const beforeUpload = (file: RcFile) => {
      //文件大小
      if (fileSize && file.size / 1024 / 1024 > fileSize) {
         message.error(`请上传小于${fileSize}M的文件`);
         return Upload.LIST_IGNORE;
      }
      //beforeUpload 函数
      if (beforeUpload_fn) {
         return beforeUpload_fn(file) || Upload.LIST_IGNORE;
      }

      return true;
   };

   return (
      <>
         <Upload
            disabled={disabled}
            action={import.meta.env.VITE_BASE_API + action_url}
            // listType 样式类型 picture   picture-card picture-circle
            listType={listType}
            accept={accept}
            fileList={fileList}
            className={className}
            onPreview={handlePreview}
            data={data}
            onRemove={onRemove}
            //上传之前
            beforeUpload={beforeUpload}
            onChange={handleChange}
         >
            {fileList.length >= count ? null : uploadButton}
         </Upload>
         {listType.includes("picture") && (
            <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
               <img alt="example" style={{ width: "100%" }} src={previewImage} />
            </Modal>
         )}
      </>
   );
}
export default Upload_card;
